<template>
  <div style="display: flex">
    <div v-for="i in 5" :key="i" @mouseenter="currentValue=i" @mouseleave="currentValue=modelValue"
         @click="emit('update:modelValue',i)">
      <el-icon :style="{color:i<=currentValue ? 'red': ''}">
        <MostlyCloudy/>
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'

const props = defineProps({
  max: {
    type: Number,
    default: 5
  },
  modelValue: {
    type: Number,
    default: 0
  }
})
const currentValue = ref(0)
const emit = defineEmits(['update:modelValue'])

watch(() => props.modelValue, (newValue, oldValue) => {
  currentValue.value = newValue
}, {
  immediate: true
})

function flat(arr, deep = 1) {
  return arr.reduce((pre, cur) => {
    return pre.concat(deep > 1 && Array.isArray(cur) ? flat(cur, deep - 1) : cur)
  }, [])
}

const arr = [1, [2, [3, [4]]], 5];

// 拉平一层
console.log(flat(arr, 1)); // [1, 2, [3, [4]], 5]

</script>


<style scoped lang="scss">

</style>